<template>
	<view>
		<uni-popup ref="vipcon" zindex type="bottom"  @maskClick="maskClick"  :safeArea="false">
			<view class="comBotBx p_rlt"  @touchmove.stop.prevent="">
				<view class="text-xll text-bold padding-left padding-top">{{data.title||'VIP专区资格券明细'}}</view>
				<view class="tabs_box">
					<tabs ref="navref" :list="navList" :current="navClass" marright="5rpx" activeWeight='400' @tabItemClick="tabSelect"
						fontSize="32rpx" activeColor="#000" activeBarColor="#53A87F" barMargin="10"></tabs>
				</view>
				<view class="flex align-center padding-top padding-bottom-sm text-sm text-c9 text-center padding-lr-sm">
					<view class="flex-sub">
						面额
					</view>
					<view class="flex-twice">
						有效截止时间
					</view>
					<view class="flex-twice text-left padding-left-xl">
						可用渠道
					</view>
					<view class="flex-sub">
						使用规则
					</view>
				</view>
				<scroll-view scroll-y="true" class="sleScr">
					<view class="padding-lr-sm">
						<block  v-for="(item,index) in list" :key="index">
							<view class="scrItem">
								<view class="flex align-center minhbx">
									<view class="flex-sub padding-left-sm">
										<text class="text-bold">{{item.money}}</text>元
									</view>
									<view class="flex-twice text-center">
										{{item.endTime}}
									</view>
									<view class="flex-twice text-c9 padding-left-xl">
										{{index%2==0?'美食':'美食/商城/预约'}}
									</view>
									<view class="flex-sub text-c6 padding-right text-end padding-tb-xs point" @click="item.show=!item.show">
										<text :class="item.show?'cuIcon-fold':'cuIcon-unfold'"></text>
									</view>
								</view>
								<view class="text-sm text-c9">
									<uni-transition :mode-class="'fade'" :show="item.show">
										<view class="padding-left-sm padding-right padding-bottom-sm">
											限会员日当天门店使用，使用范围：颐而康精选商城、小颐有约、颐而康美食平台。
										</view>
									</uni-transition>	
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
				
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, defineEmits,computed } from 'vue';
	import tabs from '@/components/comtabs/comtabs.vue'
	const emit = defineEmits(["maskClick"])
	const vipcon = ref()
	const navref = ref()
	const navList = ref([{
			statu: '1',
			name: "可用"
		}, {
			statu: '0',
			name: "不可用"
		}])
	const navClass = ref(0)	
	const props = defineProps({
	  // type: {
	  //   type: String,
	  //   default: "default",
	  // },
		data: {
		  type: Object,
		  default: () => {
		    return [];
		  },
		}
	});
	const list = computed(() => {
		let r = props.data&&props.data.sList?props.data.sList.filter((item:any)=>item.statu==navList.value[navClass.value].statu):{}
		// console.log('list',r)
	  return r;
	})
	const tabSelect = (item : any, index : any = 0) => {
		navClass.value = index
	}
	
	const orSource = ref('')
	// const modeRuleClass = ref('fade')
	const open = (source: any='') => {
		navClass.value = 0
		orSource.value = source
    // #ifdef MP-WEIXIN
    navref.value.init()
    // #endif
		vipcon.value.open()
	}
	const close = () => {
		vipcon.value.close()
	}
	
	const maskClick = (e : any) => {
		// console.log('car-maskClick',e);
		emit("maskClick")
	}
	defineExpose({ open, close })
</script>

<style lang="scss" scoped>
	.comBotBx{
		padding-bottom:130rpx;
	}
	.botbox{
		@include baseab(100%, 130rpx);
		left: 0;
		bottom: 0;
		z-index: 1;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
		padding-right: 60rpx;
	}
	.sleScr{
		min-height: 300rpx;
		max-height: 60vh;
	}
	.minhbx{
		height: 72rpx;
	}
	.scrItem{
		min-height: 72rpx;
		overflow: hidden;
		background: rgba(246, 247, 249, 0.7);
		&:nth-child(2n){
			background: #fff;
		}
	}
	.tabs_box {
		width: 100%;
		min-height: 45rpx;
		padding: 0rpx 20rpx 0rpx 20rpx;
	}
</style>